<%@page import="com.gfa4j.resource.ResourceManagerServer"%>
<%@page import="com.wef.common.util.CommonMessageDomain"%>
<%@ include file="/pages/common/taglib.jsp"%>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
		<title></title>
		<%@include file="/styles/css_lib.jsp"%>
		<%@include file="/scripts/widgets/jquery-ui/css_lib.jsp"%>
		<link rel="stylesheet" type="text/css" href="${ctx}/pages/demo/demo.css" />
		
		<%@include file="/pages/common/js_global.jsp"%>
		<%@include file="/scripts/sdk/js_lib.jsp"%>
		<%@include file="/scripts/config/js_lib.jsp" %>
		<%@include file="/scripts/utils/js_lib.jsp"%>
		<%@include file="/scripts/i18n/js_lib.jsp"%>
		<%@include file="/scripts/format/js_lib.jsp"%>
		<%@include file="/scripts/validate/js_lib.jsp"%>
		<%@include file="/scripts/widgets/jquery-ui/js_lib.jsp"%>
		<%@include file="/scripts/widgets/datePicker/js_lib.jsp"%>
		<script type="text/javascript" src="${ctx}/pages/demo/demo.js"></script>
		
		<script type="text/javascript">
			$(window).ready(function(){
				
				//初始化控件验证规则
				$.jqValidator.initValidateRules("#form1");
				//初始化控件格式化规则
				$.jqFormatter.initFormatRules("#form1");
				
				$("a[id^='aDiv']").click(function(){
					var num = $(this).attr("id").substr(4,2);
					$('#div'+num).attr('title',i18n.message.msg).dialog($.extend({},dialogConfig));
				});
				
			});
		</script>
	</head>
<body class="body">
	<!--Content-->
	<form action="" id="form1">
		<div id="Content_Show">
			<div>
				<!-- ------------------------------------------------------------------------------------------ -->
				<div class="Desc">
					功能：1.可设置日期格式，如下：(<a href="#" id="aDiv1">查看源码</a>)
				</div>
				<div id="div1" style="display: none;">
					格式 yyyy-MM-dd：&lt;k:date property="date" /&gt;<br />
					格式 yyyy-MM-dd HH:mm:ss：&lt;k:date property="date" dateFormat="yyyy-MM-dd HH:mm:ss"/&gt;
				</div>
				<div>
					&nbsp;&nbsp;格式 yyyy-MM-dd：<k:date property="date" />
					&nbsp;&nbsp;格式 yyyy-MM-dd HH:mm:ss：<k:date property="date" dateFormat="yyyy-MM-dd HH:mm:ss"/>
				</div>
				<br />
				<!-- ------------------------------------------------------------------------------------------ -->
				<div class="Desc">
					功能：2.联动日期：自动判断开始日期是否小于结束日期，如下：(<a href="#" id="aDiv2">查看源码</a>)
				</div>
				<div id="div2" style="display: none;">
					起始日期:&lt;k:date property="date" styleId="startDate"/&gt;<br /> 
					结束日期:&lt;k:date property="date" validateRules="{compareDate:'startDate'}" /&gt;
				</div>
				<div>
					&nbsp;&nbsp;起始日期:<k:date property="date" styleId="startDate" validateRules="{compareDate:{end:'endDate'}}" />
					&nbsp;&nbsp;结束日期:<k:date property="date" styleId="endDate" validateRules="{compareDate:{start:'startDate'}}" />
					
				</div>
				<br />
				<!-- ------------------------------------------------------------------------------------------ -->
				<div class="Desc">
					功能：3.显示两个月份的日期，如下：(<a href="#" id="aDiv3">查看源码</a>)
				</div>
				<div id="div3" style="display: none;">
					双日期:&lt;k:date property="date" doubleCalendar="true"/&gt;
				</div>
				<div>
					&nbsp;&nbsp;双日期:<k:date property="date" doubleCalendar="true"/>
				</div>
				<br />
				<!-- ------------------------------------------------------------------------------------------ -->
				<div class="Desc">
					功能：4.键盘上下左右键选择日期，如下：(<a href="#" id="aDiv4">查看源码</a>)
				</div>
				<div id="div4" style="display: none;">
					键盘选择:&lt;k:date property="date"/&gt;
				</div>
				<div>
					&nbsp;&nbsp;键盘选择:<k:date property="date"/>
				</div>
				<br />
				<!-- ------------------------------------------------------------------------------------------ -->
				<div class="Desc">
					功能：5.日期控件支持校验，如下：(<a href="#" id="aDiv5">查看源码</a>)
				</div>
				<div id="div5" style="display: none;">
					校验日期:&lt;k:date property="date" validateRules="{required:true}"/&gt;
				</div>
				<div>
					&nbsp;&nbsp;校验日期:<k:date property="date" validateRules="{required:true}"/>
				</div>
				<br />
			</div>
		</div>
	</form>
</body>
</html>